<template>
  <my-vanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="发布职位" left-arrow fixed @click-left="onLeftClick" />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top jobs-publish">
          <van-form @submit="sub">
            <van-cell-group>
              <van-field v-model="postData.typeName" required clickable size="large" label="职能类别" placeholder="请选择" :rules="[{ required: true, message: '请选择职能类别' }]" style="font-size: 16px" @click="popupShowPosition=true" />
              <van-field v-model="postData.stationName" required size="large" type="textarea" rows="1" :autosize="{ maxHeight: 120, minHeight: 24 }" label="职位名称" placeholder="请输入" :rules="[{ required: true, message: '请填写职位名称' }]" style="font-size: 16px" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postData.jobType" required size="large" label="工作性质" placeholder="请选择" :rules="[{ required: true, message: '请选择工作性质' }]" style="font-size: 16px" @click="popupShowJobTypePicker=true" />
              <van-field v-model="postData.workAddressName" required size="large" label="工作地点" placeholder="请选择" :rules="[{ required: true, message: '请选择工作地点' }]" style="font-size: 16px" @click="popupShowAreaPicker=true" />
              <!-- <van-field required size="large" label="所属街道" placeholder="请选择" :rules="[{ required: true, message: '请选择所属街道' }]" style="font-size: 16px" /> -->
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postData.inviteNum" required size="large" label="招聘人数" placeholder="请选择" :rules="[{ required: true, message: '请选择招聘人数' }]" style="font-size: 16px" @click="popupShowPersonNumPicker = true" />
              <van-field v-model="postData.salary" required size="large" label="工资待遇" placeholder="请选择" :rules="[{ required: true, message: '请选择工资待遇' }]" style="font-size: 16px" @click="popupShowSalaryPicker=true" />
              <van-field v-model="postData.zpDaysF" required size="large" label="招聘期限" placeholder="请选择" :rules="[{ required: true, message: '请选择招聘期限' }]" style="font-size: 16px" @click="popupShowDatePicker=true" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postData.workYearsName" required size="large" label="经验要求" placeholder="请选择" :rules="[{ required: true, message: '请选择经验要求' }]" style="font-size: 16px" @click="popupShowWorkyearsPicker=true" />
              <van-field v-model="postData.eduName" required size="large" label="学历要求" placeholder="请选择" :rules="[{ required: true, message: '请选择学历要求' }]" style="font-size: 16px" @click="popupShowEduPicker=true" />
              <van-field v-model="postData.specialtyName" required size="large" label="专业要求" placeholder="请选择" :rules="[{ required: true, message: '请选择专业要求' }]" style="font-size: 16px" @click="popupShowSpecPicker=true" />
              <van-field v-model="postData.languageName" required size="large" label="外语要求" placeholder="请选择" :rules="[{ required: true, message: '请选择外语要求' }]" style="font-size: 16px" @click="popupShowLanguagePicker=true" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postData.welfaresName" clickable size="large" rows="1" label="职位福利" :autosize="{ maxHeight: 120, minHeight: 24 }" type="textarea" placeholder="请选择"  style="font-size: 16px" @click="popupShowWelfaresPicker=true" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-cell size="large" required center :border="false" title="职位描述" style="color: #646566">
              </van-cell>

              <van-field v-model="postData.content" show-word-limit :maxlength="maxLength" rows="10" autosize type="textarea" placeholder="请填写职位描述（用人单位不得发布虚假招聘信息，不得有民族、种族、性别、宗教信仰、户籍、身高等歧视性条款）" style="padding: 0 16px 10px; font-size: 16px" />
            </van-cell-group>

            <div style="margin: 16px">
              <van-button type="primary" block color="#07f" round style="font-size: 18px" text="保存" native-type="submit" :loading="subLoading"></van-button>
            </div>
          </van-form>
        </div>
        <!-- 内容 end -->

        <!--popup-->
        <van-popup v-model="popupShowJobTypePicker" round position="bottom">
          <van-picker title='工作性质' show-toolbar :columns="pickerDataJobType" @cancel="popupShowJobTypePicker=false" @confirm="onConfirmJobType" />
        </van-popup>

        <van-popup v-model="popupShowAreaPicker" round position="bottom">
          <van-picker title='工作地点' show-toolbar :columns="pickerDataArea" value-key="codeValue" @cancel="popupShowAreaPicker=false" @confirm="onConfirmAddress" />
        </van-popup>

        <van-popup v-model="popupShowPersonNumPicker" round position="bottom">
          <van-picker title='招聘人数' show-toolbar :columns="pickerDataPersonNum" value-key="codeValue" @cancel="popupShowPersonNumPicker=false" @confirm="onConfirmPeresonNum" />
        </van-popup>

        <van-popup v-model="popupShowSalaryPicker" round position="bottom">
          <van-picker title='薪资待遇' show-toolbar :columns="pickerDataSalary" value-key="name" @cancel="popupShowSalaryPicker=false" @confirm="onConfirmSalary" />
        </van-popup>

        <van-popup v-model="popupShowDatePicker" round position="bottom">
          <van-picker title='招聘期限' show-toolbar :columns="pickerDataDate" value-key="name" default-index="5" @cancel="popupShowDatePicker=false" @confirm="onConfirmZpdays" />
        </van-popup>

        <van-popup v-model="popupShowWorkyearsPicker" round position="bottom">
          <van-picker title='工作年限' show-toolbar :columns="pickerDataWorkyears" value-key="codeValue" @cancel="popupShowWorkyearsPicker=false" @confirm="onConfirmWorkYears" />
        </van-popup>

        <van-popup v-model="popupShowEduPicker" round position="bottom">
          <van-picker title='学历要求' show-toolbar :columns="pickerDataEdu" value-key="codeValue" @cancel="popupShowEduPicker=false" @confirm="onConfirmEdu" />
        </van-popup>

        <van-popup v-model="popupShowSpecPicker" round position="bottom">
          <van-picker title='专业要求' show-toolbar :columns="pickerDataSpecialty" value-key="codeValue" @cancel="popupShowSpecPicker=false" @confirm="onConfirmSpec" />
        </van-popup>

        <van-popup v-model="popupShowLanguagePicker" round position="bottom">
          <van-picker title='外语要求' show-toolbar :columns="pickerDataLanguage" value-key="codeValue" @cancel="popupShowLanguagePicker=false" @confirm="onConfirmLanguage" />
        </van-popup>

        <!-- 福利弹框 start -->
        <van-popup v-model="popupShowWelfaresPicker" round position="bottom">
          <div class="jobs-publish-weal-picker">
            <p>
              <button type="button" @click="popupShowWelfaresPicker = false">取消</button>
              <span>选择职位福利（多选）</span>
              <button type="button" @click="onConfirmWelfares">确认</button>
            </p>
            <ul>
              <li :class="{selected:selectWelfaresIndexArr.indexOf(index) !=-1}" v-for="(item,index) in optionDataWelfares" :key="index" @click="onWelfareClick(index)">{{item.codeValue}}</li>
            </ul>
          </div>
        </van-popup>
        <!-- 福利弹框 end -->

        <!-- 选择职能 start -->
        <van-popup v-model="popupShowPosition" position="bottom" style="height: 100%">
          <div class="jobs-publish-position-picker">
            <!-- 头部 -->
            <div class="top">
              <p>
                <button type="button" @click="popupShowPosition=false">取消</button>
                <span>选择职能类别</span>
                <button type="button" @click="popupShowPosition=false">确认</button>
              </p>
              <van-search v-model="kwPositionSearch" shape="round" placeholder="请输入搜索关键词" style="border-bottom: 0.5px solid #e8e8e8" />
            </div>

            <!-- 结果 -->
            <ul class="result" style="display: none">
              <li>
                <p>网页设计/制作/<span>美工</span></p>
                <p>计算机/互联网/通信/电子 - 互联网/电子商务/网游</p>
              </li>
            </ul>

            <!-- 选项 -->
            <div class="branch">
              <div class="popu">
                <!-- 1级 -->
                <ul class="second">
                  <li :class="{select:selectStationIndex1 == index }" v-for="(item,index) in optionStationData1" :key="index" @click="onStationClick1(item,index)">{{item.codeValue}}</li>
                </ul>

                <!-- 2级 -->
                <ul class="three">
                  <li :class="{select:selectStationIndex2 == index }" v-for="(item,index) in optionStationData2Filter" :key="index" @click="onStationClick2(item,index)">{{item.codeValue}}</li>
                </ul>
              </div>
            </div>
          </div>
        </van-popup>
        <!-- 选择职能 end -->
      </div>
    </template>
  </my-vanskeleton>
</template>

<script>
import { NavBar, Cell, CellGroup, Field, Picker, Popup, Button, Search, Form, Toast, } from "vant";
import MyVanskeleton from '@/components/MyVanskeleton.vue'
import { GetNewMonthPayMin, GetNewMonthPayMax } from './Salary'
import Global from '@/Global';
export default {
  name: "JobPublish",
  components: {
    MyVanskeleton,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Search.name]: Search,
    [Form.name]: Form,
  },
  // 定义属性
  data() {
    return {
      //loading
      skeletonLoading: true,
      subLoading: false,
      //popupshow
      popupShowPosition: false,
      popupShowJobTypePicker: false,
      popupShowAreaPicker: false,
      popupShowPersonNumPicker: false,
      popupShowSalaryPicker: false,
      popupShowDatePicker: false,
      popupShowWorkyearsPicker: false,
      popupShowEduPicker: false,
      popupShowSpecPicker: false,
      popupShowLanguagePicker: false,
      popupShowWelfaresPicker: false,
      //picker data
      pickerDataJobType: this.$bd.jobType,
      pickerDataArea: this.$bd.area,
      pickerDataPersonNum: [],
      pickerDataSalary: [],
      pickerDataDate: [{ id: 1, name: '一天' }, { id: 2, name: '两天' }, { id: 3, name: '三天' }, { id: 7, name: '一周' }, { id: 14, name: '两周' }, { id: 30, name: '一个月' }, { id: 60, name: '两个月' }, { id: 90, name: '三个月' },],
      pickerDataWorkyears: this.$bd.workYears,
      pickerDataEdu: this.$bd.edu,
      pickerDataSpecialty1: this.$bd.specialtyGrade1,
      pickerDataSpecialty2: this.$bd.specialtyGrade2,
      pickerDataSpecialty: [],
      pickerDataLanguage: this.$bd.language,
      //welfare data
      optionDataWelfares: this.$bd.welfares,
      selectWelfaresIndexArr: [],
      //station data
      optionStationData1: this.$bd.positionGrade1,
      optionStationData2: this.$bd.positionGrade2,
      optionStationData2Filter: [],
      selectStationIndex1: -1,
      selectStationIndex2: -1,
      //search 
      kwPositionSearch: '',
      //content
      maxLength: 1000,
      //post data
      postData: {
        jobIDEncrypt: '',
        typeID: '',
        typeName: '',
        stationName: '',
        jobType: '',
        workAddress: '',
        workAddressName: '',
        inviteNum: '',
        salary: '',
        salaryMin: '',
        salaryMax: '',
        zpDays: 30,
        zpDaysF: '一个月',
        edu: '',
        eduName: '不限',
        language: '',
        languageName: '不限',
        content: '',
        sex: '不限',
        workYears: '',
        workYearsName: '不限',
        welfaresVal: '',
        welfaresName: '',
        specialty: '',
        specialtyName: '不限',
				iFlag:0
      },
    };
  },
  created() {
    console.log(this.$bd.edu)
    this.postData.jobIDEncrypt = this.$route.query.jobIDEncrypt;
    if (this.postData.jobIDEncrypt) {
      this.loadData();
    }
  },
  mounted() {
    this.skeletonLoading = false;
    this.initPickerData();
  },
  // 方法集合
  methods: {
    initPickerData() {
      //add '不限'
      if (this.pickerDataWorkyears[0].codeValue != '不限')
        this.pickerDataWorkyears.splice(0, 0, { code: '', codeValue: '不限' })
      // if (this.pickerDataEdu[0].codeValue != '不限')
      //   this.pickerDataEdu.splice(0, 0, { code: '', codeValue: '不限' })
      if (this.pickerDataSpecialty1[0].codeValue != '不限')
        this.pickerDataSpecialty1.splice(0, 0, { code: '', codeValue: '不限' })
      if (this.pickerDataLanguage[0].codeValue != '不限')
        this.pickerDataLanguage.splice(0, 0, { code: '', codeValue: '不限' })
      //init salary
      let salaryMin = GetNewMonthPayMin();
      salaryMin.forEach(item => {
        this.pickerDataSalary.push({
          id: item.id,
          name: item.name,
          children: GetNewMonthPayMax(item.id)
        })
      });
      //init perosn num
      this.pickerDataPersonNum.push({ code: 0, codeValue: '若干' });
      for (let index = 1; index <= 30; index++) {
        this.pickerDataPersonNum.push({ code: index, codeValue: index });
      };
      //init specialty
      this.pickerDataSpecialty1.forEach((item) => {
        let children;
        if (item.code == '') {
          children = [{ code: '', codeValue: '不限' }];
        }
        else {
          children = this.pickerDataSpecialty2.filter(s2 => {
            return s2.code.substring(0, 2) === item.code.substring(0, 2)
          })
        }
        this.pickerDataSpecialty.push({ code: item.code, codeValue: item.codeValue, children: children })
      })
    },
    loadData() {
      this.$api.get('/CompanyStation/GetStationInfo', { jobIDEncrypt: encodeURI(this.postData.jobIDEncrypt) }).then(res => {
        if (res.success) {
          this.postData = res.response;
					this.postData.iFlag = 0;
          //福利设置选中
          if (res.response.welfaresVal) {
            var arr = res.response.welfaresVal.split(',');
            arr.forEach(item => {
              this.optionDataWelfares.forEach((it, index) => {
                if (it.code == item) {
                  this.selectWelfaresIndexArr.push(index);
                }
              })
            })
          }
					// console.log(this.selectWelfaresIndexArr);
          //职能设置选中
					let mainCode = res.response.typeID.substring(0, 2) + '00';
          this.selectStationIndex1 = this.optionStationData1.findIndex(item => item.code == mainCode);
					this.onStationClick1({code:mainCode},this.selectStationIndex1);
					this.selectStationIndex2 = this.optionStationData2Filter.findIndex(item => item.code == res.response.typeID);
        }
      })
    },
    onWelfareClick(index) {
      if (this.selectWelfaresIndexArr.indexOf(index) == -1) {
        this.selectWelfaresIndexArr.push(index)
      }
      else {
        this.selectWelfaresIndexArr.splice(this.selectWelfaresIndexArr.indexOf(index), 1);
      }
    },
    onStationClick1(s1, index) {
      this.selectStationIndex1 = index;
			this.selectStationIndex2 = -1;
      this.optionStationData2Filter = [];
      this.optionStationData2.forEach((s2, index) => {
        if (s1.code.substring(0, 2) == s2.code.substring(0, 2)) {
          this.optionStationData2Filter.push(s2);
        }
      })
    },
    onStationClick2(item, index) {
      this.selectStationIndex2 = index
      this.postData.typeID = item.code;
      this.postData.typeName = this.postData.stationName = item.codeValue;
      this.popupShowPosition = false;
    },
    onConfirmJobType(value) {
      this.postData.jobType = value;
      this.popupShowJobTypePicker = false;
    },
    onConfirmAddress(value, index) {
      this.postData.workAddress = value.code;
      this.postData.workAddressName = value.codeValue
      this.popupShowAreaPicker = false;
    },
    onConfirmPeresonNum(value) {
      this.postData.inviteNum = value.codeValue;
      this.popupShowPersonNumPicker = false;
    },
    onConfirmSalary(values, indexs) {
      this.postData.salary = values[0] + '~' + values[1];
      this.postData.salaryMin = this.pickerDataSalary[indexs[0]].id;
      this.postData.salaryMax = this.pickerDataSalary[indexs[0]].children[indexs[1]].id;
      this.popupShowSalaryPicker = false;
    },
    onConfirmZpdays(value) {
      this.postData.zpDays = value.id,
        this.postData.zpDaysF = value.name
      this.popupShowDatePicker = false;
    },
    onConfirmWorkYears(value) {
      this.postData.workYears = value.code,
        this.postData.workYearsName = value.codeValue
      this.popupShowWorkyearsPicker = false;
    },
    onConfirmEdu(value) {
      this.postData.edu = value.code,
        this.postData.eduName = value.codeValue
      this.popupShowEduPicker = false;
    },
    onConfirmSpec(values, indexs) {
      this.postData.specialty = this.pickerDataSpecialty[indexs[0]].children[indexs[1]].code
      this.postData.specialtyName = values[1];
      this.popupShowSpecPicker = false;
			console.log(this.postData.specialty);
    },
    onConfirmLanguage(value) {
      this.postData.language = value.code,
        this.postData.languageName = value.codeValue
      this.popupShowLanguagePicker = false;
    },
    onConfirmWelfares() {
      this.popupShowWelfaresPicker = false
			let idArr=[];
      var nameArr = [];
      this.selectWelfaresIndexArr.forEach(index => {
				idArr.push(this.optionDataWelfares[index].code);
        nameArr.push(this.optionDataWelfares[index].codeValue);
      })
			this.postData.welfaresVal = idArr.join(',');
      this.postData.welfaresName = nameArr.join(',');
    },
    onLeftClick() {
      this.$router.back();
    },
    sub() {
      this.subLoading = true;
      this.$api.post('/CompanyStation/PubStation', this.postData).then(res => {
        this.subLoading = false;
        Toast(res.msg);
        if (res.success) {
          this.postData.jobIDEncrypt = res.response;
					this.$bus.$emit(Global.bus_company_joblist_update);
        }
      })
    }
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>